
<template>
    <!-- <div class="title-box-comp" :class="{'title-h1-box': type == 1}"> -->
    <div class="title-box-comp" :class="'title-box-h' + type">
        <template v-if="type == 2">
            <div class="img-box">
                <el-image class="h-img" :src="hiconImg" fit="contain" />
            </div>
        </template>
        <slot name="titlecont">
        </slot>
    </div>
</template>

<script setup>
    import { toRefs } from 'vue'

    import hiconImg from '@/assets/img/hicon.png'

    const props = defineProps({
        type: { // 1： 默认  2: 带icon的title
            type: [Number, String],
            default: 1
        },
    });
    const { type } = toRefs(props);
    
</script>


<style lang="scss" scoped>
    .title-box-comp {
        display: flex;
        width: 100%;
        height: 56px;
        align-items: center;
        box-sizing: border-box;
        font-weight: 600;
        font-size: 18px;
        color: #967846;
        // border-left: 4px solid #BC9F77;
        &.title-box-h1 {
            padding: 0 24px;
            border-left: 4px solid #BC9F77;
            background: linear-gradient( 90deg, rgba(188,159,119,0.2) 0%, rgba(188,159,119,0) 100%);
        }
        &.title-box-h2 {
            border-bottom: 1px solid #BC9F77;
        }
        .img-box {
            height: 18px;
            padding-right: 8px;
            .h-img {
                height: 18px;
            }
        }
    }
</style>
